<template>
    <div style="width: 100%;height: 100%;box-sizing: border-box;padding: 1px;position: relative;">
        <div ref="graphContainer" style="width: 100%;height: 100%;"></div>
        <FloatPopup
                style="
                    position: absolute;
                    border: 3px solid rgba(255, 214, 0, 1);
                    background-color: rgba(255, 13, 0, 0.4);
                    padding: 10px;
                  "
                :visible="true"
                :showClose="false"
                :right="5"
                :top="5"
        >
            <el-button size="mini" round @click="addOneNodeData" style="width: 120px !important;margin-left: 0 !important; ">
                添加node5
            </el-button>
        </FloatPopup>
    </div>
</template>
<script>
    import * as G6 from '@antv/g6';
    import FloatPopup from "@/views/test004/Dialog001/FloatPopup.vue";

    export default {
        components: {FloatPopup},
        data() {
            return {
                graph: null,
                graphData: {
                    // 节点配置
                    nodes: [
                        {
                            id: 'node1',
                            type: "diamond",
                            label: '菱形节点',
                            data: { //这里放自定义参数
                                isActive: true,
                            },
                        },
                        {
                            id: 'node2',
                            label: '默认circle',
                            data: { //这里放自定义参数
                                isActive: false,
                            },
                        },
                        {
                            id: 'node3',
                            type: "hexagon",
                            label: '虚线边框',
                            data: { //这里放自定义参数
                                dash: true,
                            },
                        },
                        {
                            id: 'node4',
                            label: '默认折叠',
                            type: "image",
                            data: {
                                online: true,
                            },
                        },
                        {
                            id: 'node5',
                            label: '默认折叠test',
                            type: "image",
                        },
                    ],
                    // 边配置
                    edges: [
                        {
                            source: 'node1',
                            target: 'node2',
                        },
                        {
                            source: 'node3',
                            target: 'node2',
                        },
                        {
                            source: 'node5',
                            target: 'node4',
                        },
                    ]
                },
            };
        },
        mounted() {
            // 初始化图表
            this.initGraph();
        },
        beforeDestroy() {
            // 销毁图表
            if (this.graph) {
                this.graph.destroy();
            }
        },
        methods: {
            //添加一个点
            addOneNodeData() {
                try {
                    // 生成唯一ID
                    const newNodeId = `node${Date.now()}`;

                    // 1. 更新数据副本
                    this.graphData.nodes.push({
                        id: newNodeId,
                        label: '新节点' + newNodeId,
                        data: {
                            category: 'person'
                        },
                        style: {
                            fill: '#6395F9',
                            stroke: '#5B8FF9'
                        }
                    });

                    // 添加边（连接到node4）
                    this.graphData.edges.push({
                        source: 'node1',
                        target: newNodeId,
                        data: {
                            label: '连接到新节点',
                            weight: 2
                        },
                        style: {
                            stroke: '#F6BD16',
                            lineWidth: 3
                        }
                    });

                    // 2. 使用 fromJSON 方法更新数据（G6 通用方式）
                    this.graph.setData(this.graphData);

                    // 3. 重新渲染
                    this.graph.render();

                    // 重新计算布局
                    this.graph.layout();
                } catch (e) {
                    alert(e.message);
                }
            },
            //初始化画布
            initGraph() {
                // 创建图表实例
                this.graph = new G6.Graph({
                    container: this.$refs.graphContainer,
                    autoResize: true,//是否在窗口大小变化时自动调整画布大小
                    autoFit: 'center',//自动适配策略，'view'(适应视图)或'center'(居中)
                    background: "skyblue",//背景颜色
                    // 节点配置
                    node: {
                        style: {
                            //静态配置-填充颜色
                            fill: '#61DDAA',
                            //透明度
                            fillOpacity: 0.8,
                            // 动态配置 边框颜色
                            stroke: (datum) => (datum.data.isActive ? '#FF0000' : '#000000'),
                            lineWidth: 2,
                            //展示标题
                            labelText: (datum) => datum.id + datum.label,
                            //断点
                            lineDash: (datum) => datum.data.dash ? [6, 4] : null,
                            //类型是图片
                            src: (datum) => datum.data.online ? require('@/assets/images/online_train.png') : require('@/assets/images/train_red.png'),
                        },
                    },
                    // 边配置
                    edge: {
                        style: {
                            stroke: '#ffc0cb', //连接线颜色
                            lineWidth: 4.5, //线条宽度
                            endArrow: true, //结尾箭头
                        },
                    },
                    // 布局配置
                    layout: {
                        type: 'force'
                    },
                    // 交互行为
                    behaviors: [
                        'drag-canvas',// 使用默认配置启用画布拖拽
                        'zoom-canvas',// 使用默认配置启用画布缩放
                        'drag-element', //允许拖拽节点
                    ],
                });
                console.log(' this.graph', this.graph);
                this.graph.setData(this.graphData);
                // 渲染图表
                this.graph.render();
            },
        }
    }
</script>